<template>
  <div class="icon-wrap">
    <div class="icon-list">
      <div v-for="(item, index) in iconList" :key="index" class="icon-content">
        <svg-icon :icon-class="item" class="svg-ico" />
        <div class="icon-title">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import icons from "../../components/icons/svg-icons";

export default {
  components: {},
  data() {
    return {
      iconList: [],
    };
  },
  created() {
    if (this.isAdmin) {
      this.iconList = icons;
      console.log(this.iconList);
    } else {
      this.$router.push("/404");
    }
  },
  computed: {
    ...mapGetters(["isAdmin"]),
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.icon-wrap {
  padding: 40px;
  width: 100%;
  height: 100%;
  .icon-list {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    .icon-content {
      margin: 9px 8px;
      width: 110px;
      height: 120px;
      display: inline-block;
      text-align: center;
      border: 1px #eee dashed;
      padding: 28px 0;
    }
    .svg-ico {
      width: 40px;
      height: 40px;
      vertical-align: middle;
    }
    .icon-title {
      margin: auto 10px;
      margin-top: 10px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: calc(100% - 20px);
    }
  }
}
</style>